<template>
  <div class="container">
    <el-table :data="withdrawList" border fit>
      <el-table-column label="序号" align="center" width="100" fixed>
        <template slot-scope="{$index}">
          <span>{{ $index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户头像" align="center" width="150" fixed>
        <template slot-scope="{row}">
          <img :src="row.withdrawAccountImg" class="userAvatar">
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="withdrawAccountName" align="center" fixed />
      <el-table-column label="用户手机" prop="phone" align="center" fixed />
      <el-table-column label="提现金额" prop="withdrawAmount" align="center" fixed />
      <el-table-column label="状态" align="center" width="150" fixed>
        <template slot-scope="{row}">
          <span>{{ row.status | withdrawStatus() }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" fixed>
        <template slot-scope="{row}">
          <el-button v-if="row.status === 2" type="primary" size="small" @click="refusedWithdraw(row,true)">同意提现</el-button>
          <p />
          <el-button v-if="row.status === 2" type="danger" size="small" @click="refusedWithdraw(row,false)">拒绝提现</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="拒绝理由" :visible.sync="withdrawDialog">
      <el-input v-model="desc" type="textarea" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="withdrawDialog = false">取 消</el-button>
        <el-button type="primary" @click="sureAgreeWithdraw">确 定</el-button>
      </span>
    </el-dialog>
    <pagination :total="listTotal" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="getwithdrawList" />
  </div>
</template>

<script>
import { userwithdrawList, isagreeWithdraw } from '@/api/order'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      withdrawList: null,
      listQuery: {
        currentPage: 1,
        pageSize: 10
      },
      listTotal: 0,
      withdrawDialog: false,
      desc: '',
      id: '',
      agree: ''
    }
  },
  mounted() {
    this.getwithdrawList()
  },
  methods: {
    getwithdrawList() {
      userwithdrawList(this.listQuery).then(response => {
        const { records, total } = response.data
        this.withdrawList = records
        this.listTotal = total
      })
    },
    refusedWithdraw(row, isagree) {
      const warningTips = isagree ? '同意' : '拒绝'
      const agreeParams = {
        id: '' + row.id,
        desc: '金额太高',
        agree: isagree
      }
      this.$confirm(`是否确定${warningTips}该用户提现`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (isagree) {
          isagreeWithdraw(agreeParams).then(response => {
            console.log(response)
            if (response.code === '200') {
              this.getwithdrawList()
            }
          })
        } else {
          this.withdrawDialog = true
          this.id = '' + row.id
          this.agree = isagree
        }
      })
    },
    sureAgreeWithdraw() {
      const paramsObj = {
        id: this.id,
        desc: this.desc,
        agree: this.agree
      }
      isagreeWithdraw(paramsObj).then(response => {
        console.log(response)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 10px;
  .userAvatar{
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
}
</style>
